<template>
  <div class="footer">
    <div class="tool">
      <i class="iconfont">&#xeb22;</i>
      <i
        class="iconfont"
        @click="addImage"
      >&#xeac4;</i>
      <i class="iconfont">&#xeae6;</i>
      <input
        type="file"
        id="image"
        accept="image/*"
        ref="image"
        @change="upload"
      >
    </div>
    <div
      contenteditable="plaintext-only"
      class="input"
      ref="input"
      @input="content = $event.target.innerText"
      @keydown="enter"
    ></div>
    <div class="enter">
      <button @click="send">发送</button>
      <span>按Enter键发送</span>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import axios from 'axios'
const OSS = require('ali-oss')

export default {
  name: 'Foot',
  data () {
    return {
    }
  },
  computed: {
    oss: () => {
      return new OSS({
        region: 'http://oss-cn-beijing.aliyuncs.com',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: ''
      })
    },
    ...mapState([
      'server'
    ])
  },
  methods: {
    enter (e) {
      if (e.keyCode === 13) {
        this.send()
      }
    },
    send () {
      this.content = String.trim(this.content)
      if (this.content !== '') {
        this.handleSend({
          content: this.content
        })
      } else {
        this.$swal({
          title: '消息不能为空',
          icon: 'warning',
          timer: 800
        })
      }
      setTimeout(() => {
        this.$refs.input.innerText = ''
      }, 1)
    },
    addImage () {
      this.$refs.image.click()
    },
    upload (e) {
      let file = e.target.files[0]
      // this.ossUpload(file)
      this.serverUpload(file)
    },
    ossUpload (file) {
      try {
        let result = this.oss.put(file.name, file)
        console.log(result)
      } catch (e) {
        console.log(e)
      }
    },
    serverUpload (file) {
      let formData = new FormData()
      formData.append('image', file)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        retry: 5,
        retryDelay: 1000
      }
      axios.post('/api', formData, config)
        .then((res) => {
          this.handleSend({
            content: this.server + '/' + res.data.fileName,
            type: 'image'
          })
          this.$refs.image.value = null
        })
    },
    ...mapActions({
      handleSend: 'send'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .footer
    padding 10px 15px
    .tool
      line-height 20px
      margin-bottom 5px
      .iconfont
        font-size 22px
        cursor pointer
      #image
        display none
    .input
      height 90px
      overflow scroll
      overflow-x hidden
      padding 0 5px
      font-size 14px
      line-height 20px
    .enter
      padding-top 10px
      button
        float right
        text-decoration none
        background-color #fff
        padding 5px 25px
        border 1px solid #aaa
        border-radius 3px
        color #666
        cursor pointer
      span
        float right
        line-height 32px
        color #999
        margin-right 10px
</style>
